<style lang="less">
  .input_track {
    .el-steps {
      display: flex;
      .el-step {
        flex: 1;
      }
    }
    .el-form-item {
      margin-bottom: 15px;
    }
    .el-date-editor, .el-select, .el-input {
      width: 100%;
    }
    .vehicle-des {
      font-weight: bold;
      padding: 10px 0px;
    }
    .loading_list_info {
      .el-row {
        margin-bottom: 10px;
      }
      border-bottom: 1px #c8c8c8 ridge;
      margin-bottom: 10px;
      padding-bottom: 10px;
    }
    .el-form {
      .el-row {
        div:last-child {
          .el-form-item__label {
            padding-left: 10px;
          }
        }
      }
    }
  }
</style>

<template>
  <el-dialog class="input_track" title="录入跟踪"  :visible.sync="inputTraceVisible"
             :close-on-click-modal="false">
    <div class="loading_list_info">
      <el-row>
        <el-col :span="6">
          <label>创建日期：{{selectedLoadingList.createDate}}</label>
        </el-col>
        <el-col :span="9">
          <label>装车单号：{{selectedLoadingList.number}}</label>
        </el-col>
        <el-col :span="9">
          <label>票数：{{selectedLoadingList.poll}}票&nbsp;&nbsp;&nbsp;&nbsp;
            重量：{{selectedLoadingList.totalWeight.toFixed(2)}}吨&nbsp;&nbsp;&nbsp;&nbsp;
            体积：{{selectedLoadingList.totalVolume.toFixed(2)}}吨&nbsp;&nbsp;&nbsp;&nbsp;
            件数：{{selectedLoadingList.totalAmount}}件</label>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <label>车牌号：{{selectedLoadingList.plateNumber}}</label>
        </el-col>
        <el-col :span="9">
          <label>司机姓名：{{selectedLoadingList.driverInfoName}}</label>
        </el-col>
        <el-col :span="9">
          <label>司机手机：{{selectedLoadingList.driverInfoPhone}}</label>
        </el-col>
      </el-row>
    </div>
    <div class="el-steps is-horizontal">
      <div class="el-step is-horizontal" v-for="(item,index) in selectedLoadingListRoutes" :key="item.id">
        <div v-if="index<selectedLoadingList.activeRoute">
          <div class="el-step__head is-success is-text">
            <div class="el-step__line is-horizontal"><i
              class="el-step__line-inner"
              :style="{transitionDelay: '0ms', borderWidth: '1px', width: index<selectedLoadingList.activeRoute-1?'100%':'50%'}"></i>
            </div>
            <span class="el-step__icon"><i class="el-icon-check"></i></span></div>
          <div class="el-step__main">
            <div class="el-step__title is-success">{{item.dischargeOrganizationName}}</div>
            <div class="el-step__description is-success"></div>
          </div>
        </div>
        <div v-else-if="index==selectedLoadingList.activeRoute">
          <div class="el-step__head is-process is-text">
            <div class="el-step__line is-horizontal"><i
              class="el-step__line-inner"
              style="transition-delay: -150ms; border-width: 0px; width: 0%;"></i></div>
            <span class="el-step__icon"><div>{{index}}</div></span></div>
          <div class="el-step__main" style="margin-left: 0px;">
            <div class="el-step__title is-process">{{item.dischargeOrganizationName}}</div>
            <div class="el-step__description is-process"></div>
          </div>
        </div>
        <div v-else>
          <div class="el-step__head is-wait is-text">
            <div class="el-step__line is-horizontal"><i class="el-step__line-inner"></i></div>
            <span class="el-step__icon"><div>{{index}}</div></span></div>
          <div class="el-step__main">
            <div class="el-step__title is-wait">{{item.dischargeOrganizationName}}</div>
            <div class="el-step__description is-wait"></div>
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex">
      <div style="flex: 1" v-for="(item,index) in selectedLoadingListRoutes" :key="item.id">
        <div v-if="index==selectedLoadingList.activeRoute">
          <div v-if="index===0">

          </div>
          <div v-else-if="index===(selectedLoadingListRoutes.length-1)">
            <el-checkbox v-model="trackForm.vehicleStatus" :true-label="105010001" :false-label="null"
                         :disabled="index!==selectedLoadingList.activeRoute">在途
            </el-checkbox>
            <br/>
            <el-checkbox v-model="trackForm.vehicleStatus" :true-label="105010005" :false-label="null"
                         :disabled="(index!==selectedLoadingList.activeRoute)">到达
            </el-checkbox>
          </div>
          <div v-else>
            <div v-if="selectedLoadingList.status!==105007006 && selectedLoadingList.status!==105007005">
              <el-checkbox v-model="trackForm.vehicleStatus" :true-label="105010001" :false-label="null"
                           :disabled="index!==selectedLoadingList.activeRoute">在途
              </el-checkbox>
              <br/>
              <el-checkbox v-model="trackForm.vehicleStatus" :true-label="105010005" :false-label="null"
                           :disabled="index!==selectedLoadingList.activeRoute">到达（卸车）
              </el-checkbox>
              <br/>
              <el-checkbox v-model="trackForm.vehicleStatus" :true-label="105010003" :false-label="null"
                           :disabled="index!==selectedLoadingList.activeRoute">发运（装车）
              </el-checkbox>
            </div>
            <div v-else>
              <el-checkbox disabled>在途</el-checkbox>
              <br/>
              <el-checkbox disabled>到达（卸车）</el-checkbox>
              <br/>
              <el-checkbox v-model="trackForm.vehicleStatus" :true-label="105010003" :false-label="null"
                           :disabled="index!==selectedLoadingList.activeRoute">发运（装车）
              </el-checkbox>
            </div>
          </div>
        </div>
        <div v-else>
          <el-checkbox-group v-model="selectedLoadingListRoutes[index].trackVehicleStatusList">
            <div v-if="index===0">

            </div>
            <div v-else-if="index===(selectedLoadingListRoutes.length-1)">
              <el-checkbox :label="105010001" :disabled="index!==selectedLoadingList.activeRoute">在途</el-checkbox>
              <br/>
              <el-checkbox :label="105010005" :disabled="(index!==selectedLoadingList.activeRoute)">到达</el-checkbox>
            </div>
            <div v-else>
              <el-checkbox :label="105010001" :disabled="index!==selectedLoadingList.activeRoute">在途</el-checkbox>
              <br/>
              <el-checkbox :label="105010005" :disabled="index!==selectedLoadingList.activeRoute">到达（卸车）</el-checkbox>
              <br/>
              <el-checkbox :label="105010003" :disabled="index!==selectedLoadingList.activeRoute">发运（装车）</el-checkbox>
            </div>
          </el-checkbox-group>
        </div>
      </div>
    </div>
    <div class="vehicle-des">
      车辆当前在{{selectedLoadingList.currentOrgName}}，可以勾选到达，将车辆标记为到达{{selectedLoadingList.nextOrgName}}状态
    </div>
    <el-form :model="trackForm" ref="trackForm" label-width="100px" label-position="left">
      <el-row>
        <el-col :span="12">
          <el-form-item label="跟踪人员"
                        :rules="[{ required: true, message: '请输入跟踪人员', trigger: 'blur' },
                                     { max: 30, message: '长度不能超过 30 个字符', trigger: 'blur' }]"
                        prop="trackingPerson">
            <el-input v-model="trackForm.trackingPerson"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="跟踪时间"
                        :rules="[{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }]"
                        prop="trackingTime">
            <el-date-picker v-model="trackForm.trackingTime" type="datetime"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="跟踪方式"
                        :rules="[{type:'number',required: true, message: '请选择跟踪方式', trigger: 'change' }]"
                        prop="trackingMode">
            <el-select
              v-model="trackForm.trackingMode" placeholder="请选择">
              <el-option
                v-for="item in $store.getters.SHIPMENT_TRACE_METHOD"
                :label="item.cnDictValname"
                :key="item.dictVal"
                :value="item.dictVal">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="跟踪节点">
            <el-select
              disabled
              v-model="trackForm.loadingListRoute.id" placeholder="请选择">
              <el-option
                v-for="item in selectedLoadingListRoutes"
                :label="item.dischargeOrganizationName"
                :key="item.id"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="当前地址"
                        :rules="[{ max: 100, message: '长度不能超过 100 个字符', trigger: 'blur' }]"
                        prop="currentAddress">
            <el-input v-model="trackForm.currentAddress"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="中转公司"
                        :rules="[{ max: 50, message: '长度不能超过 50 个字符', trigger: 'blur' }]"
                        prop="transitCompany">
            <el-input v-model="trackForm.transitCompany"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="跟踪描述"
                        :rules="[{ required: true, message: '请输入跟踪描述', trigger: 'blur',whitespace: true },
                                     { max: 500, message: '长度不能超过 500 个字符', trigger: 'blur' }]"
                        prop="description">
            <el-input v-model="trackForm.description" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table
      :data="trackTableData"
      height="200"
      style="width: 100%;margin-top: 10px;">
      <el-table-column
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="trackingTime"
        label="跟踪时间"
        width="180">
      </el-table-column>
      <el-table-column
        prop="trackingPersonName"
        label="跟踪人"
        width="120">
      </el-table-column>
      <el-table-column
        width="120"
        prop="trackingModeName"
        label="跟踪方式">
      </el-table-column>
      <el-table-column
        width="120"
        prop="routeName"
        label="跟踪节点">
      </el-table-column>
      <el-table-column
        width="120"
        prop="vehicleStatusName"
        label="跟踪状态">
      </el-table-column>
      <el-table-column
        width="120"
        prop="currentAddress"
        label="当前地址">
      </el-table-column>
      <el-table-column
        prop="description"
        width="200"
        label="备注">
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button @click.native="inputTraceVisible = false">取消</el-button>
      <el-button type="primary" @click="saveListTrace()" :disabled="selectedLoadingList.status===105007007">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { saveSpecialTrace, getTrace } from '../../api/stowage/SpecialTrace.js';
export default {
  name: 'SpecialTrackDetail',
  componentName: 'SpecialTrackDetail',
  data () {
    return {
      trackTableData: [],
      selectedLoadingListId: null,
      selectedLoadingList: {
        status: 105007007,
        totalWeight: 0,
        totalVolume: 0
      },
      selectedLoadingListRoutes: [],
      trackForm: {
        vehicleStatus: null,
        transitCompany: null,
        currentAddress: null,
        description: null,
        trackingPerson: null,
        trackingTime: null,
        trackingMode: null,
        loadingListRoute: {
          id: null
        },
        loadingListRouteId: null
      },
      inputTraceVisible: false
    };
  },
  methods: {
    show (selectedLoadingList) {
      this.selectedLoadingListId = selectedLoadingList.id;
      this.selectedLoadingList = selectedLoadingList;
      this.selectedLoadingListRoutes = Object.assign([], selectedLoadingList.routes);
      if (this.$refs['trackForm']) {
        this.$refs['trackForm'].resetFields();
      }
      this.$ue.resetObjNull(this.trackForm);
      this.trackForm.trackingPerson = this.$store.state.username;
      this.trackForm.loadingListRoute = {
        id: this.selectedLoadingList.activeLoadingListRouteId
      };
      this.inputTraceVisible = true;
      this.loadTrace('EQ_loadingList.id=' + this.selectedLoadingListId);
    },
    saveListTrace () {
      if (!this.trackForm.vehicleStatus) {
        this.$message.error('请选择一个跟踪类型');
      } else {
        this.$refs['trackForm'].validate((valid) => {
          if (valid) {
            saveSpecialTrace(this.trackForm)
              .then(res => {
                if (res.data.successFlg) {
                  this.inputTraceVisible = false;
                  this.$message('添加成功!');
                  this.$emit('saveListTraceSuccess');
                } else {
                  this.$message.error(res.data.errorMsg);
                }
              });
          }
        });
      }
    },
    loadTrace (filter = '') {
      getTrace({
        filters: filter,
        sorts: '+trackingTime'
      }).then(res => {
        if (res.data.successFlg) {
          this.trackTableData = res.data.detailModelList;
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    }
  }
};
</script>
